<template>
  <div>
    <!-- 房屋配置 -->
    <div class="house-configure">
      <van-cell title="房屋配置" />
      <div class="iconConfigure">
        <ul>
          <!-- <li>
            <i class="iconfont icon-wardrobe HousePackage_icon__2hT31"></i>
            <p>衣柜</p>
          </li>
          <li>
            <i class="iconfont icon-wash HousePackage_icon__2hT31"
              ><p>洗衣机</p></i
            >
          </li>
          <li>
            <i class="iconfont icon-air HousePackage_icon__2hT31"></i>
            <p>空调</p>
          </li>
          <li>
            <i class="iconfont icon-gas HousePackage_icon__2hT31"></i>
            <p>天然气</p>
          </li>
          <li>
            <i class="iconfont icon-ref HousePackage_icon__2hT31"></i>
            <p>冰箱</p>
          </li>
          <li>
            <i class="iconfont icon-Heat HousePackage_icon__2hT31"></i>
            <p>暖气</p>
          </li>
          <li>
            <i class="iconfont icon-vid HousePackage_icon__2hT31"></i>
            <p>电视</p>
          </li>
          <li>
            <i class="iconfont icon-heater HousePackage_icon__2hT31"></i>
            <p>热水器</p>
          </li>
          <li>
            <i class="iconfont icon-broadband HousePackage_icon__2hT31"></i>
            <p>宽带</p>
          </li>
          <li>
            <i class="iconfont icon-sofa HousePackage_icon__2hT31"></i>
            <p>沙发</p>
          </li> -->
          <li
            v-for="(item, index) in iconTextTable"
            :key="index"
            @click="onClick(item)"
            :class="{ active: isSlected.includes(item.text) }"
          >
            <i class="iconfont" :class="item.icon"></i>
            <p>{{ item.text }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      // 配置表便于管理
      iconTextTable: [
        { icon: 'icon-wardrobe HousePackage_icon__2hT31', text: '衣柜' },
        { icon: 'icon-wash HousePackage_icon__2hT31', text: '洗衣机' },
        { icon: 'icon-air HousePackage_icon__2hT31', text: '空调' },
        { icon: 'icon-gas HousePackage_icon__2hT31', text: '天然气' },
        { icon: 'icon-ref HousePackage_icon__2hT31', text: '冰箱' },
        { icon: 'icon-Heat HousePackage_icon__2hT31', text: '暖气' },
        { icon: 'icon-vid HousePackage_icon__2hT31', text: '电视' },
        { icon: 'icon-heater HousePackage_icon__2hT31', text: '热水器' },
        { icon: 'icon-broadband HousePackage_icon__2hT31', text: '宽带' },
        { icon: 'icon-sofa HousePackage_icon__2hT31', text: '沙发' }
      ],
      isSlected: []
    }
  },
  computed: {
    ...mapState(['rentHouse'])
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['updateRentHouse']),
    onClick(item) {
      if (!this.isSlected.includes(item.text)) {
        this.isSlected.push(item.text) //如果没有这项就添加
      } else {
        const index = this.isSlected.indexOf(item.text) //有这项返回索引
        this.isSlected.splice(index, 1) //删除该项
      }
      // 把数据格式处理为接口参数格式
      const isSlectedString = this.isSlected.join('|')
      // 存储发布房屋参数
      const obj = this.rentHouse
      obj.supporting = isSlectedString
      // 更新本地数据
      this.updateRentHouse(obj)
    }
  }
}
</script>

<style scoped lang="less">
.iconConfigure {
  .iconfont {
    font-size: 44px !important;
  }
  p {
    font-size: 30px;
  }
}
ul {
  float: left;
  width: 100%;
  background-color: #fff;
}
li {
  display: inline-block;
  height: 140px !important;
  //   margin-right: 40px;
  width: 20%;
  text-align: center;
  line-height: 100%;
  padding-top: 20px;
}
.active {
  color: #21b97a;
}
</style>
